import { GoldCoinOutlined, HomeFilled, LeftOutlined } from 'esy-ui';
import { useFormatText, useNavigation } from '@/hooks';
import BalanceContent from '@/layouts/balance-content';

interface HeaderProps {
  title: string;
  isGoHome?: boolean;
  isBalance?: boolean;
}

export function Header(props: HeaderProps) {
  const { title, isGoHome, isBalance } = props;
  const { text } = useFormatText();
  const navigation = useNavigation();

  const goback = () => {
    navigation(-1);
  };

  const goHome = () => {
    navigation('/');
  };

  return (
    <div className='h-11 text-white text-base flex items-center justify-center bg-head'>
      <LeftOutlined className='absolute text-sm left-0 p-4' onClick={goback} />
      {isGoHome ? <HomeFilled onClick={goHome} className='absolute text-sm left-12 p-4' /> : null}
      <div className='truncate mx-10'>{text(title)}</div>
      {isBalance ? (
        <BalanceContent>
          <GoldCoinOutlined className='absolute right-0 top-0 text-primary p-3 text-xl' />
        </BalanceContent>
      ) : null}
    </div>
  );
}
